<div class="search flex-center">
    <!-- 普通检索 -->
    <div class='searchPart flex'>
        <div class="option">
            <select name="" id="searchselect3" class="borderNone">
                <script id="selectArr3" type="text/html">
            <option value="{{:#data['value']}}">{{:#data['text']}}</option>
        </script>
            </select>
        </div>

        <input type="text" class="borderNone" id='searchWord3' onkeypress="if (event.keyCode == 13) goMultiSearch3();"
            placeholder="请输入关键词...">
        <!-- 检索 -->
        <span class="similar" id="similarShow3">
            <script id="searchMention3" type="text/html">
                <a href="javascript:void(0);" onclick=goShowWord3(this)>{{:#data}}</a>
                </script>
        </span>
        <button class="borderNone s_Btn" id='searchBtn3'>检索</button>
    </div>
</div>
<div class="tableBox">
    <span id='mention3' class="mentionData">暂无数据</span>
    <table cellspacing="0" cellpadding="0">
        <thead>
            <th width="82px">序号</th>
            <th width="564px">标题</th>
            <th width="190px">预览时间</th>
            <th width="100px">操作</th>
        </thead>
        <tbody>
            <script id='myPreviewTableData' type="text/html">
            <tr>
                <td data-dbID='{{:#data["dbID"]}}'>{{:#data['num']}}</td>
                <td><p class="title" style="width: 535px;" data-sysId='{{:#data["sysId"]}}' data-detailUrl='{{:#data["detailUrl"]}}' data-ipAddress='{{:#data["ipAddress"]}}'  data-id='{{:#data["sysId"]}}'  data-filename='{{:#data["fileName"]}}'  data-tablename='{{:~tableName(#data,#index)}}' data-title='{{:#data["title"]}}' title="{{:#data['title']}}">{{:#data['title']}}</p></td>
                <td>{{:#data['time']}}</td>
                <td>  
                    {{if sysId}}
                    <p><span data-id='{{:#data["sysId"]}}' class="deleteSave" >删除</span></p>
                    {{/if}}
            </td>
            </tr>
            </script>
        </tbody>
    </table>
</div>
<!-- 分页 -->
<div class="pageNation">
    <div id="PreviewPageNation"></div>
</div>
<script>
    var postTableData3 = {
        page: 1,
        searchValue: '',
        pageSize: 10
    }
    function goMultiSearch3() {
        postTableData3.searchValue = $('#searchWord3').val();
        postTableData3.page = 1;
        pageData.tableData(config.getViewList, postTableData3, 'myPreviewTableData', 'PreviewPageNation', true, '#mention3', render(), false, callBackPage);
    }
    function render(data, index) {
            return {
                tableName: function (data, index) {
                    return data.tableName ? data.tableName : data.outTableName;
                }
            }
        };
    $(function () {
        $('#searchBtn3').click(function () {
            goMultiSearch3();
        })
        core.useTemplateAuto('selectArr3', config.selectPerArr, {});
        var callBackPage = function callBack(curr, limit) {
            postTableData3.page = curr;
            //每页显示的条数
            postTableData3.pageSize = limit;
        };
        pageData.tableData(config.getViewList, postTableData3, 'myPreviewTableData', 'PreviewPageNation', true, '#mention3', render(), false, callBackPage);
        $('#previewTable').click(function (e) {
            if (e.target.className == 'deleteSave') {
                // 获取数据
                var resourceID = $(e.target).parents('tr').children('td').eq(1).children('p').attr('data-id');
                var dbID = $(e.target).parents('tr').children('td').eq(0).attr('data-dbID');
                layer.open({
                    title: '提示',
                    content: '你确定删除此条数据吗？',
                    time: 0,//不自动关闭
                    btn: ['确定', '取消'],
                    scrollbar: true,
                    yes: function (index) {
                        layer.close(index);
                        //删除该条数据
                        shared.ajaxPost(config.deleteView, { sysId: $(e.target).attr('data-id') }, function callback(res) {
                            //    重新獲取數據
                            pageData.tableData(config.getViewList, postTableData3, 'myPreviewTableData', 'PreviewPageNation', true, '#mention3', render(), false, callBackPage);
                            layer.msg(res)
                        })
                    }
                });
            }
        })
        var timer;
        $('#similarShow3').css('display', 'none');
        // 屏蔽掉拼音输入过程中会高频请求后台数据库
        var cpLock = true;
        $('#searchWord3').on('compositionstart', function () {
            cpLock = false;
        });
        $('#searchWord3').on('compositionend', function () {
            cpLock = true;
        });
        $('#searchWord3').bind('input propertychange', function (e) {
            e.preventDefault();
            //获取input 元素,并实时监听用户输入
            //逻辑 如果输入框有值才调取 排除空格
            if (!$('#searchWord3').val().replace(/\s/ig, "")) {
                timer = setTimeout(function () {
                    if (cpLock) {
                        if (cpLock) {
                            // getSearchMention('');
                        }
                    }
                }, 2000)
            } else {
                timer = setTimeout(function () {
                    if (cpLock) {
                        if (cpLock) {
                            getSearchMention($('#searchWord3').val());
                        }
                    }
                }, 2000)
            }
        })
        //失去焦点
        $('#searchWord3').blur(function (e) {
            e.preventDefault();
            //延迟关闭
            setTimeout(function () {
                // input框失去焦点，隐藏下拉框
                $('#similarShow3').css('display', 'none');
            }, 200);
        })
        //获取焦点
        $('#searchWord3').focus(function (e) {
            if (!($('#searchWord3').val().replace(/\s/ig, ""))) {
                // getSearchMention('');
            }
        })
        function getSearchMention(keyWords) {
            var keyWords = base.replaceWord(keyWords);
            shared.ajaxPost(config.searchMention, { inputWord: keyWords }, function (res) {
                clearTimeout(timer)
                //如果搜索出来的值为空
                if (res && res.length) {
                    $('#similarShow3').css('display', 'block');
                    core.useTemplateAuto('searchMention3', res, {});
                } else {
                    $('#similarShow3').css('display', 'none');
                }
            })
        }
        // 跳转到详情页
        pageData.personNalDetail('#previewTable')
    })
    function goShowWord3(data) {
        $('#searchWord3').val($(data).text());
        goMultiSearch3();
    } 
</script>